<template>
	<view class="content">
		<view class="fan">
			<image @click="fanhui" src="../../../static/fan.png" mode=""></image>
			<view class="qu" @click="fanhui">取消</view>
		</view>
		<view class="body">
			<p class="tit">重置密码</p>
			<view class="Hong">
				<input type="text" placeholder="请输入手机号" maxlength="11" v-model="Phong" />
			</view>
			<view class="Hong_a">
				<input type="text" placeholder="请输入6位验证码" maxlength="6" v-model="yanzma" />
				<view class="Hong_b" v-if="yanzhen" @click="huoqu">获取验证码</view>
				<view class="Hong_b" v-if="!yanzhen">
					<u-count-down :timestamp="timestamp" :show-days="false" :show-hours="false" :show-minutes="false" bg-color="#EEF2F5" @end="jieshu"> </u-count-down>
				</view>
			</view>
			<view class="Hong_a">
				<input :type="mima_look == 1 ? 'password' : 'text'" placeholder="请输入6-20位数字或字母组合" maxlength="20" v-model="mima_mi" style="padding-left: 10rpx;  outline: none; width: 400rpx; border: none; background-color: #eef2f5" />
				<image v-show="mima_look == 1" @click="look_a" src="../../../static/yingchang.png" mode=""></image>
				<image v-show="mima_look == 2" @click="look_b" src="../../../static/xinashi.png" mode=""></image>
			</view>
			<view class="denglu" @click="tijiao"> 重 置 密 码 </view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			timestamp: 59,
			yanzhen: true,
			mima_look: true,
			look: 1,
			Phong: "",
			yanzma: "",
			mima_mi: "",
		};
	},
	onLoad() {
		uni.setNavigationBarColor({
			frontColor: "#ffffff",
			backgroundColor: "#FE3548",
			animation: {
				duration: 400,
				timingFunc: "easeIn",
			},
		});
	},
	methods: {
		tijiao() {
			this.zhaohui();
		},
		async yanzhengma() {
			let obj = {
				mobile: this.Phong,
			};
			const res = await this.$u.post("api/index/sendSms", obj, {});
			// console.log(res.msg, 5555555555)
			// this.yanzma = res
			uni.$showMsg(res.msg);
		},
		async zhaohui() {
			let obj = {
				mobile: this.Phong,
				password: this.mima_mi,
				code: this.yanzma,
			};
			const res = await this.$u.post("api/index/forget_password", obj, {});
			if (res.code == 1) {
				console.log(1231231321312313);
				uni.navigateTo({
					url: "./deng",
				});
			}
			uni.$showMsg(res.msg);
		},
		fanhui() {
			wx.navigateTo({
				url: "deng",
			});
		},
		jieshu() {
			this.yanzhen = true;
		},
		huoqu() {
			if (this.Phong == "") {
				uni.$showMsg("请先填写正确的手机号");
			} else {
				this.yanzhen = false;
				this.yanzhengma();
			}
		},
		look_a() {
			this.mima_look = 2;
		},
		look_b() {
			this.mima_look = 1;
		},
	},
};
</script>

<style lang="scss" scoped>
.body {
	padding-top: 100rpx;
	padding-left: 100rpx;
}

.fan {
	width: 700rpx;
	margin-top: 60rpx;
	margin-left: 20rpx;
	height: 60rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;

	image {
		width: 20rpx;
		height: 37rpx;
	}

	.qu {
		width: 80rpx;
		height: 60rpx;
		line-height: 60rpx;
		text-align: right;
		color: #666666;
		font-size: 28rpx;
	}
}

.tit {
	width: 300rpx;
	height: 50rpx;
	font-size: 36rpx;
	font-family: PingFang SC;
	font-weight: bold;
	line-height: 50rpx;
	color: #333333;
	padding-top: 40rpx;
	margin-left: 24rpx;
}

.Hong {
	width: 460rpx;
	margin-left: 20rpx;
	height: 58rpx;
	background-color: #eef2f5;
	margin-top: 80rpx;
	display: flex;
	align-items: center;
	border-radius: 10rpx;
	input {
		padding: 0 20rpx;
		width: 460rpx;
		font-size: 24rpx;
	}
}

.Hong_a {
	width: 460rpx;
	border-radius: 10rpx;
	margin-left: 20rpx;
	height: 58rpx;
	background-color: #eef2f5;
	margin-top: 60rpx;
	display: flex;
	align-items: center;
	display: flex;
	justify-content: space-between;

	input {
		padding: 0 20rpx;
		width: 400rpx;
		font-size: 24rpx;
	}

	.Hong_b {
		width: 180rpx;
		height: 58rpx;
		line-height: 58rpx;
		color: #999999;
		font-size: 24rpx;
		text-align: right;
		margin-right: 20rpx;
		color: #fe3548;
	}

	image {
		width: 40rpx;
		height: 31rpx;
		margin-right: 20rpx;
	}
}

.denglu {
	border-radius: 10rpx;
	width: 460rpx;
	height: 90rpx;
	background-color: #4b8eff;
	margin-left: 20rpx;
	margin-top: 50rpx;
	color: #ffffff;
	line-height: 90rpx;
	text-align: center;
	font-weight: 800;
	font-size: 40rpx;
	border-radius: 10rpx;
}
</style>
